The Chrome Developer Tools (Devtools for short), are a set of web authoring and debugging tools built into Google Chrome. The Devtools provide web developers deep access into the internals of the browser and their web application. Use the Devtools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization Overall, there are eight main groups of tools available view Developer Tools:

• Elements
• Resources
• Network
• Sources
• Timeline
• Profiles
• Audits
• Console

Elements

The elements consists of the html code corresponding to the document and it also has the CSS code in the right side which is very much helpful for the front-end designers to efficiently design the webpage.

Resources

The resources section consists of the local storage, Whenever the browser refreshes the data stored will be replace with new data from the server. In order to use the data for further processing they can be stored to the local storage as a temporary files.

Network

In Network section used to view the network calls between the server and the client. It displays every time when the network call initiated between the server and the client. 

Source

Source section used to view the Source files of the corresponding files. This section allows specifically set the breakpoints between the codes to run particular part and verify for errors. 

Profiles

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes two profilers: a CPU profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

• The CPU profiler shows where execution time is spent in your page’s JavaScript functions.
• The Heap profiler shows memory distribution by your page’s JavaScript objects and related DOM nodes.
• The CSS Selector profiler records the aggregate time spent matching selectors to elements in the DOM tree. This time is also captured within “Style Recalculation” Timeline events.

Console

The console section consists of the error logs and it act as an output screen to check the printed values of the variables.

For any query contact Clofus Innovations.